<template>
    <el-image-viewer 
      v-if="previewVisible"
      :url-list="urlList"
      :initial-index="0"
      :z-index="3000"
      :on-close="handleClose"
    />
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    components: { ElImageViewer },
    props: {
        // 控制显示/隐藏 
        previewVisible: {
            type: Boolean,
            default: false 
        },
        // 图片地址数组 
        urlList: {
            type: Array,
            default: () => []
        },
    },
    watch: {
        // 监听父组件 previewVisible 的变化，并修改
        previewVisible(newVal) {
            // 当 previewVisible 发生变化时，触发自定义事件通知父组件
            this.$emit('update:previewVisible', newVal);
        }
    },
    methods: {
        //将子组件向父组件发送更新信息
        handleClose() {
            // 当图片查看器关闭时，将 previewVisible 设置为 false 并触发自定义事件通知父组件
            this.$emit('update:previewVisible', false);
            // 触发 close 事件，方便父组件监听
            this.$emit('close'); 
        }
    }
};
</script>    